<template>
  <el-container class='elheight'>
    <el-main style="margin-left:15px">
      <el-container>
        <el-header class="dzy-main-header">
          <div class="btn-group-el">
            <btn-group :currentSelectedData="currentSelectedData" @btnClickCallback="btnClickCallback"></btn-group>
          </div>
          <!-- <div class="dzy-custom-search-box">
            <div>
              组织名称：<el-input placeholder="请输入内容" v-model="selectForm.orgName" clearable class="dzy-custom-input"></el-input>
            </div>
            <div>
              负责人：<el-input placeholder="请输入内容" v-model="selectForm.firstResponsibilityName" clearable class="dzy-custom-input"></el-input>
            </div>
            <div>
              负责人联系方式：<el-input placeholder="请输入内容" v-model="selectForm.firstResponsibilityPhone" clearable class="dzy-custom-input"></el-input>
            </div>
            <div>
              <el-button @click="searchHandleClick" type="primary" icon="el-icon-search">查询</el-button>
            </div>
          </div> -->
        </el-header>
        <el-main>
          <app-table
            :page-data="pageData"
            :table-columns="tableColumns"
            v-on:currentChange="handleCurrentChange"
            v-on:handleCheckedRows="handleCheckedRows">
          </app-table>
          <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogFormVisible"
            :before-close="cancel"
            :close-on-click-modal="false">
            <el-form :model="formData" :rules="rules" ref="formData" :disabled="showOnly" label-width="120px" size="mini">
              <el-form-item label="标题：" prop="title" >
                <el-input v-model="formData.title" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="通知分类"
                            prop="noticeType">
                <el-select filterable
                            v-model="formData.noticeType"
                            placeholder="请选择通知分类">
                  <el-option v-for="item in noticeOption"
                              :key="item.id"
                              :value="item.code"
                              :label="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="发布人：" prop="publisher" >
                <el-input v-model="formData.publisher" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="内容：" prop="content">
                <el-input v-model="formData.content" autocomplete="off" type="textarea"
                                  :rows="3"></el-input>
              </el-form-item>
              <el-form-item label="附件：">
                <app-upload ref="appUpload" v-model="formData.attachArr" ></app-upload>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" v-if="isfooterBtnShow">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="save('formData')">确 定</el-button>
            </div>
          </el-dialog>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import AppTree from '@/components/common/AppTree'
import AppUpload from '@/components/AppLoadFile'
import AppTable from '@/components/AppTable'
import BtnGroup from '@/components/BtnGroup'
import {getAllRegion} from '@/utils/region'
import {findNotice, createNotice, updataNotice, deleteNotice, getNotice} from '@/http/AppApi'
import {getDictDataOption} from '@/utils/getDictDataOption'
export default {
  data () {
    return {
      dialogFormVisible: false,
      isfooterBtnShow: true,
      treeData: [],
      pageData: {},
      noticeOption: [],
      dialogTitle: '',
      currentSelectedData: [],
      showOnly: false,
      tableColumns: [
        { prop: 'title', label: '标题', width: 160 },
        { prop: 'publisher', label: '发布人', width: 80 },
        { prop: 'content', label: '内容' }
      ],
      tableDada: [],
      formData: {},
      selectForm: {},
      ResponsibilityTemp: [],
      areaProps: {
        label: 'name',
        value: 'id'
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        noticeType: [
          { required: false, message: '请选择通知分类', trigger: 'blur' }
        ],
        publisher: [
          { required: false, message: '请输入发布人', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      },
      ResponsibilityOption: []
    }
  },
  components: {
    AppTree,
    BtnGroup,
    AppTable,
    AppUpload
  },
  mounted () {
    this.getTableData()
    this.noticeOption = getDictDataOption('通知公告')
  },
  methods: {
    save (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          this.$alert('请填写正确表单格式', '', {
            confirmButtonText: '确定'
          })
        } else {
          if (this.formData.attachArr && this.formData.attachArr.length > 0) {
            this.formData.attach = this.formData.attachArr.join(',')
          } else {
            this.formData.attach = ''
          }
          let m = this
          if (m.formData.id) {
            updataNotice(m.formData).then(resp => {
              if (resp.code && resp.code === '200') {
                m.dialogFormVisible = false
                m.$message({
                  type: 'success',
                  message: '修改成功'
                })
                m.getTableData()
              }
            })
          } else {
            createNotice(m.formData).then(resp => {
              if (resp.code && resp.code === '200') {
                m.dialogFormVisible = false
                m.$message({
                  type: 'success',
                  message: '添加成功'
                })
                m.getTableData()
              } else {
                m.$message({
                  type: 'info',
                  message: resp.message
                })
              }
            })
          }
        }
      })
    },
    del (rows) {
      if (rows && rows instanceof Array && rows.length > 0) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          rows.forEach(row => {
            deleteNotice(row).then(resp => {
              if (resp.code && resp.code === '200') {
                this.$message({
                  type: 'success',
                  message: '删除成功'
                })
                this.getTableData()
              }
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    cancel () {
      this.dialogFormVisible = false
      this.formData = {}
      this.$refs.appUpload.clearFileList()
    },
    getTableData () {
      let param = this.queryData
      findNotice(param).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data) {
            this.pageData = data
          }
        }
      })
    },
    handleCurrentChange (val) {
      this.selectForm.offset = (val - 1) * 10
      this.getTableData(this.selectForm)
    },
    btnClickCallback (callbackData) {
      if (callbackData.btnType === 'delete') {
        this.dialogFormVisible = false
        let rows = callbackData.rows
        this.del(rows)
      } else {
        this.isfooterBtnShow = callbackData.btnType !== 'get'
        if (callbackData.btnType === 'publishing_Notices') {
          this.showOnly = callbackData.sohwOnly
        } else {
          let tempData = {}
          tempData = JSON.stringify(callbackData.rows[0])
          this.formData = JSON.parse(tempData)
          getNotice(this.formData.id).then(resp => {
            if (resp.code && resp.code === '200') {
              this.formData = resp.data
              this.formData.attachArr = this.toArray(this.formData.attach)
            }
          })
        }
        this.showOnly = callbackData.sohwOnly
        this.dialogTitle = callbackData.dialogTitle
        this.dialogFormVisible = true
      }
    },
    handleCheckedRows (rows) {
      if (rows && rows instanceof Array && rows.length > 0) {
        this.currentSelectedData = rows
        this.formData = rows[0]
      } else if (rows.length === 0) {
        this.currentSelectedData = []
      }
    },
    appTreeClick (data) {
      let deptData = {}
      deptData.id = data.id
      deptData.items = this.treeData
      let deptIdArr = getAllRegion(deptData)
      this.$set(this.formData, 'deptIdArr', deptIdArr)
      this.selectForm.offset = 0
      this.selectForm.deptId = data.id
      this.getTableData(this.selectForm)
    },
    searchHandleClick () {
      this.selectForm.offset = 0
      this.getTableData(this.selectForm)
    },
    toArray (string) {
      let arr = []
      if (string) {
        let stringArr = string.split(',')
        for (let i = 0; i < stringArr.length; i++) {
          let obj = {}
          obj.name = 'IMG_' + i
          obj.url = stringArr[i]
          arr.push(obj)
        }
        return string.split(',')
      } else {
        return []
      }
    }
  }
}
</script>

<style scoped>
  .el-table th{
    background-color: #409EFF;
    color: #333;
  }
  .ral-latitude{
    position: relative;
  }
  #coordinateChoice{
    color: red;
    font-size: 14px;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 18px;
  }
.el-form >>> .el-input__inner {
  height: 37px;
}
.el-form >>> .el-form-item__label {
  line-height: 37px;
}
.el-form >>> .el-cascader__label {
  line-height: 37px;
}
</style>
